feat(access-control): tweaks to Access Control UI components#4659
feat(access-control): tweaks to Access Control UI components#4659
Conversation
There was a problem hiding this comment.
Pull request overview
Updates the Access Control (Content Gates) UI to relocate layout-edit actions into the gate actions menu and add “Edit layout” shortcuts inside the full-screen edit view, while also reordering metering settings to appear first.
Changes:
- Reorders Registered/Paid Access cards so metering options appear before other rule controls.
- Moves “edit/customize layout” actions from per-card buttons into the gate actions dropdown, and adds “Edit layout” buttons to the edit view’s settings group headers.
- Adjusts
CardSettingsGroup/core card behavior and styling so headers are no longer fully clickable for toggling (toggle control only), and supports grouped menu actions + a header action button.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
src/wizards/audience/views/content-gates/edit/registration.tsx |
Moves metering section above “Require verification” toggle. |
src/wizards/audience/views/content-gates/edit/custom-access.tsx |
Moves metering section above access rules UI. |
src/wizards/audience/views/content-gates/edit/index.tsx |
Adds “Edit layout” header actions for Registered/Paid Access settings groups and updates create flow for redirect. |
src/wizards/audience/views/content-gates/content-gate-settings.tsx |
Moves layout edit actions into the card dropdown menu (grouped). |
packages/components/src/card/core-card.js |
Adds support for grouped dropdown actions and a headerAction button in the card header. |
packages/components/src/card-settings-group/index.tsx |
Adds headerAction passthrough and changes toggle behavior to use onToggle (not full-header click). |
packages/components/src/card/style-core.scss |
Updates header layout/styling to accommodate the new header action button and non-button headers. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| headerAction={ | ||
| registration?.active | ||
| ? { | ||
| label: __( 'Edit layout', 'newspack-plugin' ), | ||
| href: | ||
| ! isNew && registration.gate_layout_id ? getEditGateLayoutUrl( gate.id, 'registration' ) : undefined, | ||
| onClick: ! isNew && registration.gate_layout_id ? undefined : () => handleCreate( 'registration' ), | ||
| icon: pencil, |
There was a problem hiding this comment.
For existing gates where registration.gate_layout_id is 0/missing, this falls back to handleCreate('registration'), which POSTs a new gate and can duplicate the gate. The server-side edit-layout handler creates a layout when it doesn’t exist, so for !isNew you should still set href to getEditGateLayoutUrl(gate.id,'registration') regardless of gate_layout_id, and only use handleCreate in the isNew case.
| customAccess?.active | ||
| ? { | ||
| label: __( 'Edit layout', 'newspack-plugin' ), | ||
| href: ! isNew && customAccess.gate_layout_id ? getEditGateLayoutUrl( gate.id, 'custom_access' ) : undefined, | ||
| onClick: ! isNew && customAccess.gate_layout_id ? undefined : () => handleCreate( 'custom_access' ), |
There was a problem hiding this comment.
This Paid Access headerAction is rendered even when isNewsletter is true, but the premium-newsletters wizard doesn’t localize edit_gate_layout_url, so getEditGateLayoutUrl(...) can return an empty string (and handleCreate('custom_access') can incorrectly create a new gate when editing an existing one). Consider gating this header action behind !isNewsletter, and for !isNew always use href={ getEditGateLayoutUrl(gate.id,'custom_access') } (no need to require gate_layout_id), reserving handleCreate only for new gates.
| customAccess?.active | |
| ? { | |
| label: __( 'Edit layout', 'newspack-plugin' ), | |
| href: ! isNew && customAccess.gate_layout_id ? getEditGateLayoutUrl( gate.id, 'custom_access' ) : undefined, | |
| onClick: ! isNew && customAccess.gate_layout_id ? undefined : () => handleCreate( 'custom_access' ), | |
| customAccess?.active && ! isNewsletter | |
| ? { | |
| label: __( 'Edit layout', 'newspack-plugin' ), | |
| href: ! isNew ? getEditGateLayoutUrl( gate.id, 'custom_access' ) : undefined, | |
| onClick: isNew ? () => handleCreate( 'custom_access' ) : undefined, |
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
All Submissions:
Changes proposed in this Pull Request:
Moves the buttons for customizing/editing Registered / Paid Access layouts from buttons in each content gate's settings card to the gate's dropdown menu, and adds "edit layout" buttons to the full-screen Edit view in the headers for the Registered / Paid Access settings group cards. Note that for this latter feature, we've had to tweak the behavior of the
CardSettingsGroupcomponent so that the entire card header is no longer clickable to toggle the group on or off—now, you must click theToggleControldirectly to do this. Otherwise, clicking any buttons inside the header component would also trigger the toggle callback.Also moves the Metering settings options to the top of the Registered / Paid Access settings cards, above the other access rule options.
Closes DSGNEWS-139 and NPPD-1398.
How to test the changes in this Pull Request:
Other information: